import React, { Component } from 'react';
import { Icon, DatePicker, Modal } from 'antd';
// import { NavLink } from 'react-router-dom'
import moudle from '../css/Moudle.module.css'
class Moudle extends Component {
    state = {
        visible: false
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    hideModal = () => {
        this.setState({
            visible: false,
        });
    };
    render() {
        return (
            <div>
                {/* <Button type="primary" onClick={this.showModal}>
                    Modal
        </Button> */}
                <Modal
                    title="Modal"
                    visible={this.state.visible}
                    onOk={this.hideModal}
                    onCancel={this.hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                    <div className={moudle.search}>
                        <h1><Icon type="search" />{this.title} <span>(中文/拼音/英文)</span></h1>
                        <p className={moudle.p1}>全球目的地和住宿...</p>
                        <from className={moudle.cont}>
                            <div className={moudle.from}>
                                <input type="text" placeholder="广州, 中国" />
                            </div>
                            <div className={moudle.from}>
                                <div className={moudle.from1}>
                                    <label>入住</label>
                                    <DatePicker />
                                </div>
                                <div className={moudle.from1}>
                                    <label>退房</label>
                                    <DatePicker />
                                </div>
                            </div>
                            <div className={moudle.from}>
                                <div className={moudle.from2}>
                                    <label>客房</label>
                                    <select>
                                        <option data-rooms="1" data-adults="1">1 间客房, 1 位成人</option>
                                        <option data-rooms="1" data-adults="2" selected="selected">1 间客房, 2 位成人</option>
                                        <option data-more-options="true">其他选择…</option>
                                    </select>
                                </div>
                            </div>
                        </from>
                    </div>
                </Modal>
            </div>
        )
    }
}
export default Moudle